<template>
  <div class="flip-container">
    <div :class="{flipper180: flipFlag, flipper0: !flipFlag}">
      <div class="front">
        <StockFront @flip="flip" />
      </div>
      <div class="back">
        <StockBack @flip="flip" :flip-flag="flipFlag" />
      </div>
    </div>
  </div>
</template>

<script>
import StockFront from './StockFront'
import StockBack from './StockBack'

export default {
  name: "Stock",
  components: {
    StockFront,
    StockBack
  },
  data() {
    return {
      flipFlag: false
    }
  },
  methods: {
    flip() {
      this.flipFlag = !this.flipFlag
    }
  }
}
</script>

<style scoped>
.flip-container {
  -webkit-perspective: 2000;
}
.flip-container .flipper180 {
  transform: rotateY(180deg);
}
.flip-container .flipper0 {
  transform: rotateY(0deg);
}
.flip-container, .front, .back {
  width: 400px;
  height: 426px;
}
.flipper180, .flipper0 {
  transition: 2s;
  transform-style: preserve-3d;
  position: relative;
}
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
}
.back {
  transform: rotateY(180deg);
}
</style>